<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目时间线 - 炼焦大数据智能诊断系统</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            background: linear-gradient(120deg, #fafdff 60%, #e3f0ff 100%);
        }
        .timeline {
            position: relative;
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 0 60px 0;
        }
        .timeline::after {
            content: '';
            position: absolute;
            width: 8px;
            background: linear-gradient(180deg, #2563eb 0%, #60a5fa 100%);
            box-shadow: 0 0 24px #60a5fa99;
            top: 0;
            bottom: 0;
            left: 50%;
            margin-left: -4px;
            border-radius: 8px;
        }
        .timeline-item {
            padding: 10px 40px;
            position: relative;
            width: 50%;
            box-sizing: border-box;
            margin-bottom: 2.5rem;
            z-index: 2;
        }
        .timeline-item::after {
            content: '';
            position: absolute;
            width: 32px;
            height: 32px;
            right: -20px;
            background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
            box-shadow: 0 0 16px #60a5fa99;
            top: 18px;
            border-radius: 50%;
            z-index: 3;
            border: 4px solid #fff;
        }
        .timeline-left { left: 0; }
        .timeline-right { left: 50%; }
        .timeline-left::after { right: -16px; }
        .timeline-right::after { left: -16px; right: auto; }
        .timeline-content {
            padding: 28px 32px;
            background: #fff;
            position: relative;
            border-radius: 18px;
            box-shadow: 0 8px 32px rgba(37,99,235,0.08);
            border-left: 6px solid #60a5fa;
            transition: box-shadow 0.3s;
        }
        .timeline-item:hover .timeline-content {
            box-shadow: 0 16px 48px rgba(37,99,235,0.16);
            border-left: 6px solid #2563eb;
        }
        .timeline-date {
            font-weight: bold;
            color: #2563eb;
            margin-bottom: 10px;
            font-size: 1.1rem;
            letter-spacing: 1px;
        }
        .timeline-milestone {
            display: inline-block;
            padding: 4px 14px;
            background: linear-gradient(90deg, #e0edff 0%, #c7e0ff 100%);
            color: #2563eb;
            border-radius: 12px;
            font-size: 0.95rem;
            margin-bottom: 10px;
            font-weight: 600;
        }
        .timeline-title {
            margin: 0 0 10px;
            font-size: 1.35rem;
            color: #1a237e;
            font-weight: 700;
        }
        .timeline-desc {
            margin: 0;
            color: #444;
            font-size: 1.05rem;
        }
        .timeline-tasks {
            padding-left: 1.5rem;
            margin-top: 0.75rem;
            margin-bottom: 0;
            color: #2563eb;
            font-size: 0.98rem;
        }
        .timeline-progress {
            margin-top: 1.2rem;
            height: 10px;
            background: #e0edff;
            border-radius: 5px;
            overflow: hidden;
        }
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
            border-radius: 5px;
            box-shadow: 0 2px 8px #60a5fa44;
        }
        .completion {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: #60a5fa;
            margin-top: 0.25rem;
            font-weight: 600;
        }
        .metrics-container {
            display: flex;
            gap: 32px;
            margin-top: 1.5rem;
            justify-content: center;
        }
        .metric-card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px #2563eb11;
            padding: 24px 32px;
            text-align: center;
            min-width: 120px;
        }
        .metric-icon {
            font-size: 2rem;
            color: #2563eb;
            margin-bottom: 8px;
        }
        .metric-value {
            font-size: 2.1rem;
            font-weight: 700;
            color: #2563eb;
        }
        .metric-label {
            font-size: 1rem;
            color: #666;
        }
        .info-box, .cta {
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 4px 24px #2563eb11;
            padding: 32px 36px;
            margin: 32px 0;
        }
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 32px;
        }
        .section-title {
            text-align: center;
            font-size: 2rem;
            color: #2563eb;
            font-weight: 800;
            margin: 2.5rem 0 1.5rem 0;
            letter-spacing: 2px;
        }
        .time-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0 8px;
            margin-top: 1.5rem;
        }
        .time-table th, .time-table td {
            background: #fafdff;
            padding: 12px 16px;
            border-radius: 8px;
            text-align: center;
        }
        .time-table th {
            color: #2563eb;
            font-weight: 700;
            font-size: 1.05rem;
        }
        .status-badge {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 12px;
            font-size: 0.95rem;
            font-weight: 600;
        }
        .status-badge.completed { background: #e0f7fa; color: #009688; }
        .status-badge.in-progress { background: #fffbe7; color: #f59e42; }
        .status-badge.planned { background: #e3e8ff; color: #2563eb; }
        .cta {
            background: linear-gradient(90deg, #e0edff 0%, #fafdff 100%);
            border: none;
            box-shadow: 0 8px 32px #2563eb22;
            text-align: center;
            margin-top: 48px;
        }
        .cta-content h2 {
            font-size: 2rem;
            color: #2563eb;
            font-weight: 800;
            margin-bottom: 0.5rem;
        }
        .cta-content p {
            color: #333;
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
        }
        .cta-buttons {
            display: flex;
            gap: 24px;
            justify-content: center;
        }
        .btn.btn-lg, .btn.btn-outline.btn-lg {
            font-size: 1.1rem;
            padding: 12px 32px;
            border-radius: 32px;
        }
        .btn.btn-lg {
            background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%);
            color: #fff;
            border: none;
            box-shadow: 0 2px 8px #2563eb33;
        }
        .btn.btn-lg:hover {
            background: linear-gradient(90deg, #1e40af 0%, #60a5fa 100%);
        }
        .btn.btn-outline.btn-lg {
            background: #fff;
            color: #2563eb;
            border: 2px solid #2563eb;
        }
        .btn.btn-outline.btn-lg:hover {
            background: #2563eb;
            color: #fff;
        }
        @media screen and (max-width: 900px) {
            .timeline-item { padding: 10px 10px; }
            .timeline-content { padding: 18px 10px; }
        }
        @media screen and (max-width: 768px) {
            .timeline::after { left: 31px; }
            .timeline-item { width: 100%; padding-left: 70px; padding-right: 25px; }
            .timeline-item::after, .timeline-left::after, .timeline-right::after { left: 18px; right: auto; }
            .timeline-right { left: 0; }
            .timeline-content { border-left: 4px solid #60a5fa; }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <h1><i class="fas fa-chart-line"></i> 炼焦大数据智能诊断系统</h1>
            <p class="subtitle">数据分析工作平台</p>
        </div>
    </header>

    <nav>
        <div class="container">
            <ul>
                <li><a href="index.html"><i class="fas fa-home"></i> 首页</a></li>
                <li><a href="project_intro.html"><i class="fas fa-project-diagram"></i> 项目介绍</a></li>
                <li><a href="data_prep.html"><i class="fas fa-database"></i> 数据准备</a></li>
                <li><a href="eda.html"><i class="fas fa-search"></i> 探索性分析</a></li>
                <li><a href="modeling.html"><i class="fas fa-brain"></i> 模型开发</a></li>
                <li><a href="advanced.html"><i class="fas fa-rocket"></i> 高级分析</a></li>
                <li><a href="model.html"><i class="fas fa-cube"></i> 单孔分析模型</a></li>
                <li><a href="timeline.html" class="active"><i class="fas fa-calendar-alt"></i> 项目时间线</a></li>
            </ul>
        </div>
    </nav>

    <div class="page-header">
        <div class="container">
            <h2>项目时间线</h2>
            <p>炼焦大数据智能诊断系统项目规划与实施进度</p>
        </div>
    </div>

    <main>
        <div class="container">
            <section>
                <h2 class="section-title">项目整体规划</h2>
                <div class="info-box">
                    <p>炼焦大数据智能诊断系统项目分为两期实施，历时18个月，涵盖从数据准备到系统上线及持续优化的全过程。以下是项目关键里程碑时间线。</p>
                    
                    <div class="metrics-container" style="margin-top: 1.5rem;">
                        <div class="metric-card">
                            <div class="metric-icon"><i class="fas fa-calendar-check"></i></div>
                            <div class="metric-value">2<span>期</span></div>
                            <div class="metric-label">项目阶段</div>
                        </div>
                        <div class="metric-card">
                            <div class="metric-icon"><i class="fas fa-clock"></i></div>
                            <div class="metric-value">18<span>个月</span></div>
                            <div class="metric-label">总周期</div>
                        </div>
                        <div class="metric-card">
                            <div class="metric-icon"><i class="fas fa-flag-checkered"></i></div>
                            <div class="metric-value">8<span>个</span></div>
                            <div class="metric-label">关键里程碑</div>
                        </div>
                        <div class="metric-card">
                            <div class="metric-icon"><i class="fas fa-tasks"></i></div>
                            <div class="metric-value">65<span>%</span></div>
                            <div class="metric-label">当前进度</div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <h2 class="section-title">详细时间线</h2>
                <div class="timeline">
                    <!-- 第一阶段：准备期 -->
                    <div class="timeline-item timeline-left">
                        <div class="timeline-content">
                            <div class="timeline-date">2023年1月 - 2月</div>
                            <span class="timeline-milestone">第一期</span>
                            <h3 class="timeline-title">项目启动与需求分析</h3>
                            <p class="timeline-desc">确定项目范围，形成详细需求文档，组建项目团队，建立项目管理框架。</p>
                            <ul class="timeline-tasks">
                                <li>成立项目组</li>
                                <li>现场调研与用户访谈</li>
                                <li>需求分析报告编写</li>
                                <li>技术路线确定</li>
                            </ul>
                            <div class="timeline-progress">
                                <div class="progress-bar" style="width: 100%;"></div>
                            </div>
                            <div class="completion">
                                <span>已完成</span>
                                <span>100%</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item timeline-right">
                        <div class="timeline-content">
                            <div class="timeline-date">2023年3月 - 5月</div>
                            <span class="timeline-milestone">第一期</span>
                            <h3 class="timeline-title">数据采集与标准化</h3>
                            <p class="timeline-desc">建立数据采集系统，对接各信息源，建立数据仓库，完成数据标准化与质量评估。</p>
                            <ul class="timeline-tasks">
                                <li>数据源调研与评估</li>
                                <li>数据采集系统开发</li>
                                <li>数据质量评估框架建立</li>
                                <li>历史数据迁移与清洗</li>
                            </ul>
                            <div class="timeline-progress">
                                <div class="progress-bar" style="width: 100%;"></div>
                            </div>
                            <div class="completion">
                                <span>已完成</span>
                                <span>100%</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item timeline-left">
                        <div class="timeline-content">
                            <div class="timeline-date">2023年6月 - 8月</div>
                            <span class="timeline-milestone">第一期</span>
                            <h3 class="timeline-title">基础分析模型开发</h3>
                            <p class="timeline-desc">开发数据预处理模块，构建基础统计分析模型，实现数据可视化功能。</p>
                            <ul class="timeline-tasks">
                                <li>预处理算法开发</li>
                                <li>统计分析模型构建</li>
                                <li>可视化平台搭建</li>
                                <li>单炉分析原型开发</li>
                            </ul>
                            <div class="timeline-progress">
                                <div class="progress-bar" style="width: 100%;"></div>
                            </div>
                            <div class="completion">
                                <span>已完成</span>
                                <span>100%</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item timeline-right">
                        <div class="timeline-content">
                            <div class="timeline-date">2023年9月 - 11月</div>
                            <span class="timeline-milestone">第一期</span>
                            <h3 class="timeline-title">单炉分析模型开发与测试</h3>
                            <p class="timeline-desc">开发单炉分析功能，包括温度曲线分析、质量预测、异常检测等核心功能，并进行初步测试。</p>
                            <ul class="timeline-tasks">
                                <li>单炉分析模型开发</li>
                                <li>温度曲线分析算法开发</li>
                                <li>质量预测模型构建</li>
                                <li>功能测试与优化</li>
                            </ul>
                            <div class="timeline-progress">
                                <div class="progress-bar" style="width: 90%;"></div>
                            </div>
                            <div class="completion">
                                <span>进行中</span>
                                <span>90%</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item timeline-left">
                        <div class="timeline-content">
                            <div class="timeline-date">2023年12月 - 2024年2月</div>
                            <span class="timeline-milestone">第一期</span>
                            <h3 class="timeline-title">第一期系统集成与上线</h3>
                            <p class="timeline-desc">完成基础功能的集成，界面开发，并进行系统测试，发布第一期系统。</p>
                            <ul class="timeline-tasks">
                                <li>系统集成</li>
                                <li>用户界面开发</li>
                                <li>系统测试与验收</li>
                                <li>第一期功能上线</li>
                            </ul>
                            <div class="timeline-progress">
                                <div class="progress-bar" style="width: 70%;"></div>
                            </div>
                            <div class="completion">
                                <span>进行中</span>
                                <span>70%</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item timeline-right">
                        <div class="timeline-content">
                            <div class="timeline-date">2024年3月 - 5月</div>
                            <span class="timeline-milestone">第二期</span>
                            <h3 class="timeline-title">高级分析模型开发</h3>
                            <p class="timeline-desc">开发深度学习模型，炉组关联分析，能耗优化等高级功能模块。</p>
                            <ul class="timeline-tasks">
                                <li>深度学习模型开发</li>
                                <li>炉组关联分析算法</li>
                                <li>能耗优化模型</li>
                                <li>高级预测分析</li>
                            </ul>
                            <div class="timeline-progress">
                                <div class="progress-bar" style="width: 40%;"></div>
                            </div>
                            <div class="completion">
                                <span>进行中</span>
                                <span>40%</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item timeline-left">
                        <div class="timeline-content">
                            <div class="timeline-date">2024年6月 - 7月</div>
                            <span class="timeline-milestone">第二期</span>
                            <h3 class="timeline-title">智能诊断系统开发</h3>
                            <p class="timeline-desc">构建故障诊断知识库，开发专家系统规则引擎，实现智能诊断与建议功能。</p>
                            <ul class="timeline-tasks">
                                <li>知识图谱构建</li>
                                <li>规则引擎开发</li>
                                <li>智能建议系统</li>
                                <li>专家经验数字化</li>
                            </ul>
                            <div class="timeline-progress">
                                <div class="progress-bar" style="width: 15%;"></div>
                            </div>
                            <div class="completion">
                                <span>初始阶段</span>
                                <span>15%</span>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-item timeline-right">
                        <div class="timeline-content">
                            <div class="timeline-date">2024年8月 - 9月</div>
                            <span class="timeline-milestone">第二期</span>
                            <h3 class="timeline-title">系统完善与全面上线</h3>
                            <p class="timeline-desc">完成所有功能集成，系统测试，用户培训，并实现全面上线运行。</p>
                            <ul class="timeline-tasks">
                                <li>完整系统集成</li>
                                <li>系统性能优化</li>
                                <li>用户培训与反馈</li>
                                <li>全面上线与运行</li>
                            </ul>
                            <div class="timeline-progress">
                                <div class="progress-bar" style="width: 0%;"></div>
                            </div>
                            <div class="completion">
                                <span>未开始</span>
                                <span>0%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <h2 class="section-title">关键任务计划</h2>
                <div class="info-box">
                    <table class="time-table">
                        <thead>
                            <tr>
                                <th>任务名称</th>
                                <th>责任团队</th>
                                <th>开始时间</th>
                                <th>计划完成</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>数据采集与清洗系统</td>
                                <td>数据工程团队</td>
                                <td>2023年3月</td>
                                <td>2023年5月</td>
                                <td><span class="status-badge completed">已完成</span></td>
                            </tr>
                            <tr>
                                <td>基础可视化平台</td>
                                <td>前端团队</td>
                                <td>2023年5月</td>
                                <td>2023年7月</td>
                                <td><span class="status-badge completed">已完成</span></td>
                            </tr>
                            <tr>
                                <td>单炉分析模型</td>
                                <td>算法团队</td>
                                <td>2023年6月</td>
                                <td>2023年10月</td>
                                <td><span class="status-badge in-progress">进行中</span></td>
                            </tr>
                            <tr>
                                <td>炉间对比分析</td>
                                <td>算法团队</td>
                                <td>2023年8月</td>
                                <td>2023年12月</td>
                                <td><span class="status-badge in-progress">进行中</span></td>
                            </tr>
                            <tr>
                                <td>质量预测模型</td>
                                <td>数据科学团队</td>
                                <td>2023年9月</td>
                                <td>2024年1月</td>
                                <td><span class="status-badge in-progress">进行中</span></td>
                            </tr>
                            <tr>
                                <td>第一期系统集成</td>
                                <td>系统集成团队</td>
                                <td>2023年12月</td>
                                <td>2024年2月</td>
                                <td><span class="status-badge in-progress">进行中</span></td>
                            </tr>
                            <tr>
                                <td>深度学习模型</td>
                                <td>AI研究团队</td>
                                <td>2024年3月</td>
                                <td>2024年5月</td>
                                <td><span class="status-badge planned">计划中</span></td>
                            </tr>
                            <tr>
                                <td>知识图谱构建</td>
                                <td>知识工程团队</td>
                                <td>2024年4月</td>
                                <td>2024年7月</td>
                                <td><span class="status-badge planned">计划中</span></td>
                            </tr>
                            <tr>
                                <td>系统优化与上线</td>
                                <td>全体团队</td>
                                <td>2024年8月</td>
                                <td>2024年9月</td>
                                <td><span class="status-badge planned">计划中</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>

            <section>
                <h2 class="section-title">里程碑与交付物</h2>
                <div class="info-box">
                    <div class="info-grid">
                        <div>
                            <h3><i class="fas fa-flag"></i> 里程碑1：项目启动</h3>
                            <p>2023年1月</p>
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>项目计划书</li>
                                <li>需求规格说明书</li>
                                <li>技术路线图</li>
                            </ul>
                        </div>
                        <div>
                            <h3><i class="fas fa-flag"></i> 里程碑2：数据平台</h3>
                            <p>2023年5月</p>
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>数据采集系统</li>
                                <li>数据标准化规范</li>
                                <li>数据仓库架构</li>
                            </ul>
                        </div>
                        <div>
                            <h3><i class="fas fa-flag"></i> 里程碑3：基础分析</h3>
                            <p>2023年8月</p>
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>基础分析模块</li>
                                <li>可视化系统原型</li>
                                <li>单炉分析初版</li>
                            </ul>
                        </div>
                        <div>
                            <h3><i class="fas fa-flag"></i> 里程碑4：第一期上线</h3>
                            <p>2024年2月</p>
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>单炉分析系统</li>
                                <li>炉间对比分析</li>
                                <li>基础预测功能</li>
                            </ul>
                        </div>
                        <div>
                            <h3><i class="fas fa-flag"></i> 里程碑5：高级模型</h3>
                            <p>2024年5月</p>
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>深度学习模型</li>
                                <li>炉组关联分析</li>
                                <li>能耗优化模型</li>
                            </ul>
                        </div>
                        <div>
                            <h3><i class="fas fa-flag"></i> 里程碑6：智能诊断</h3>
                            <p>2024年7月</p>
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>故障诊断知识库</li>
                                <li>专家系统规则引擎</li>
                                <li>智能建议系统</li>
                            </ul>
                        </div>
                        <div>
                            <h3><i class="fas fa-flag"></i> 里程碑7：全面上线</h3>
                            <p>2024年9月</p>
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>完整系统集成</li>
                                <li>用户培训资料</li>
                                <li>系统运维手册</li>
                            </ul>
                        </div>
                        <div>
                            <h3><i class="fas fa-flag"></i> 里程碑8：持续优化</h3>
                            <p>2024年10月起</p>
                            <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
                                <li>系统优化报告</li>
                                <li>迭代升级计划</li>
                                <li>价值评估报告</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>

            <div class="cta">
                <div class="cta-content">
                    <h2>项目进行中，敬请期待更多功能</h2>
                    <p>炼焦大数据智能诊断系统正在按计划逐步实施，期待与用户共同打造行业领先的智能化平台</p>
                    <div class="cta-buttons">
                        <a href="index.html" class="btn btn-lg">返回首页 <i class="fas fa-arrow-right"></i></a>
                        <a href="model.html" class="btn btn-outline btn-lg">查看单孔分析模型</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <h2><i class="fas fa-chart-line"></i> 炼焦大数据智能诊断系统</h2>
                    <p>数据分析工作平台</p>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="project_intro.html">项目介绍</a></li>
                        <li><a href="data_prep.html">数据准备</a></li>
                        <li><a href="eda.html">探索性分析</a></li>
                        <li><a href="modeling.html">模型开发</a></li>
                        <li><a href="advanced.html">高级分析</a></li>
                        <li><a href="model.html">单孔分析模型</a></li>
                        <li><a href="timeline.html">项目时间线</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-envelope"></i> data-analysis@coking-system.com</p>
                    <p><i class="fas fa-phone"></i> +86 123 4567 8910</p>
                    <p><i class="fas fa-map-marker-alt"></i> 钢铁厂数据分析中心</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 炼焦大数据智能诊断系统. 保留所有权利.</p>
            </div>
        </div>
    </footer>
    
    <script src="../scripts/main.js"></script>
</body>
</html> 